<template>
  <div class="evaluation-table">
    <a-table
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="$emit('change', $event)"
      rowKey="id"
    >
      <template slot="action" slot-scope="text, record">
        <a-button type="primary" @click="$emit('evaluate', record)">评价</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      required: true
    }
  },
  
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: 80,
          customRender: (text, record, index) => index + 1,
        },
        {
          title: '教师姓名',
          dataIndex: 'teacherName',
          key: 'teacherName',
          width: 120,
        },
        {
          title: '所属学院',
          dataIndex: 'college',
          key: 'college',
          width: 150,
        },
        {
          title: '课程名称',
          dataIndex: 'courseName',
          key: 'courseName',
          width: 180,
        },
        {
          title: '上课时间',
          dataIndex: 'classTime',
          key: 'classTime',
          width: 180,
        },
        {
          title: '上课地点',
          dataIndex: 'classLocation',
          key: 'classLocation',
          width: 120,
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 120,
        },
      ]
    }
  }
}
</script>

<style scoped>
.evaluation-table {
  margin-top: 20px;
}
</style>